<template>
  <div class="">
    <a-button-group>
      <a-button type="primary" v-if="menuManagerBtnAdd" icon="plus" @click="handlerAdd">添加</a-button>
      <a-button type="primary" v-if="menuManagerBtnEdit" icon="edit" @click="handlerEdit">编辑</a-button>
      <a-button type="primary" v-if="menuManagerBtnDel" icon="delete" @click="handleDelete">删除</a-button>
    </a-button-group>
    <a-row>
      <a-col :span="5">
        <a-tree
          v-model="checkedKeys"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @select="onSelect"
        />
      </a-col>
      <a-col :span="1" style=" border-left:1px solid gray; height:600px;"></a-col>
      <a-col :span="7">
        <a-form-model
          :form="form"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 18 }"
        >
          <a-form-model-item label="路径编码">
            <a-input
              :disabled="formEdit"
              v-model="mdl.name"
              name="name"
              v-decorator="['name', { rules: [{ required: true, message: '请输入标题' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="标题">
            <a-input
              :disabled="formEdit"
              v-model="mdl.title"
              name="title"
              v-decorator="['title', { rules: [{ required: true, message: '请输入标题' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="父级节点">
            <a-input
              :disabled="true"
              v-model="mdl.parentId"
              v-decorator="['parentId', { rules: [{ required: true, message: '请输入父级节点' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="图标">
            <a-input
              :disabled="formEdit"
              v-model="objectToJson"
              v-decorator="['icon', { rules: [{ required: true, message: '请输入图标' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="资源路径">
            <a-input
              :disabled="formEdit"
              v-model="mdl.redirect"
              v-decorator="['redirect', { rules: [{ required: true, message: '请输入资源路径' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="菜单状态">
            <a-radio-group v-model="mdl.status">
              <a-radio value="0">
                正常
              </a-radio>
              <a-radio value="-1">
                停用
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="显示状态">
            <a-radio-group v-model="mdl.shows">
              <a-radio value="0">
                显示
              </a-radio>
              <a-radio value="-1">
                隐藏
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="类型">
            <a-select v-model="mdl.types" :disabled="formEdit" placeholder="目录/菜单/按钮">
              <a-select-option value="0">
                目录
              </a-select-option>
              <a-select-option value="1">
                菜单
              </a-select-option>
              <a-select-option value="2">
                按钮
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="排序">
            <a-input
              :disabled="formEdit"
              v-model="mdl.orders"
              v-decorator="['orders', { rules: [{ required: true, message: '请输入排序' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="描述">
            <a-input
              :disabled="formEdit"
              v-model="mdl.des"
              v-decorator="['des', { rules: [{ required: true, message: '请输入描述' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item label="前端组件">
            <a-input
              :disabled="formEdit"
              v-model="mdl.component"
              v-decorator="['component', { rules: [{ required: true, message: '请输入前端组件' }] }]"
            />
          </a-form-model-item>
          <a-form-model-item v-if="formStatus === 'update'" :wrapper-col="{ span: 14, offset: 8 }">
            <a-button type="primary" @click="update">更新</a-button>
            <a-button @click="onCancel" style="margin-left: 20px;">取消</a-button>
          </a-form-model-item>
          <a-form-model-item v-if="formStatus === 'create'" :wrapper-col="{ span: 14, offset: 8 }">
            <a-button type="primary" @click="create">保存</a-button>
            <a-button @click="onCancel" style="margin-left: 20px;">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
      <a-col :span="1" style=" border-left:1px solid gray; height:600px;"></a-col>
      <a-col :span="10">
        <span>按钮或资源</span>
        <button-menu-add></button-menu-add>
        <menu-button-table></menu-button-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import MenuButtonTable from './modules/MenuButtonTable.vue'
  const treeData = [];
  export default {
    components: {
      MenuButtonTable
    },
    data () {
      return {
        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
        treeData,
        name: 'Permission2',
        menuManagerBtnAdd: true,
        menuManagerBtnEdit: true,
        menuManagerBtnDel: true,
        mdl: {},
        formStatus: '',
        formEdit: true
      };
    },
    beforeCreate () {
      this.form = this.$form.createForm(this)
      console.log('form::', this.form)
    },
    computed: {
      objectToJson: {
        get () {
          // debugger
          const meta = JSON.stringify(this.mdl.meta)
          return meta
          // return this.bank_account.replace(/\s/g, ''())
        },
        set (val) {
          // this.mdl.meta = val
        }
      }
    },
    mounted () {
      this.fetchs({
          pageSize: 5,
          pageNum: 1
      });
    },
    watch: {
      checkedKeys (val) {
        console.log('onCheck', val);
      }
    },
    methods: {
      ...mapActions(['MenuGet', 'MenuAdd', 'MenuList', 'TreeList', 'Menus', 'MenuDel']),
      onExpand (expandedKeys) {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onCheck (checkedKeys) {
        console.log('onCheck', checkedKeys);
        this.checkedKeys = checkedKeys;
      },
      onSelect (selectedKeys, info) {
        console.log('onSelect', info);
        this.selectedKeys = selectedKeys;
        // this.$message.info(selectedKeys)
        debugger;
        var s = this.selectedKeys[0]
        // this.$message.info('modal update=' + this.selectedRowKeys[0])
        const {
          MenuGet
        } = this
        MenuGet({
            id: s
        }).then(data => {
          debugger
          this.mdl = Object.assign({}, data.result)
          // this.$refs.modal.edit(this.mdl);
          console.log(data)
        });
        debugger;
      },
      handlerAdd () {
        this.formEdit = false;
        this.formStatus = 'create';
        const pid = this.mdl.parentId
        this.mdl = {};
        this.mdl.parentId = pid
      },
      handlerEdit () {
        console.log('1')
        if (this.mdl.id) {
          this.formEdit = false;
          this.formStatus = 'update';
        }
      },
      handleDelete () {
        var id = this.selectedKeys[0]
        console.log('2')
        this.$message.info(id)
        const {
          MenuDel
        } = this
        // console.log('params:', id);
        this.loading = true;
        MenuDel({
            id
        }).then(data => {
          // console.log('data' + data)
          this.fetchs({
              pageSize: 5,
              pageNum: 1
          });
        });
      },
      handleSubmit (e) {
        console.log('3')
      },
      handleSubmit2 (e) {
        console.log('3')
      },
      onCancel () {
        this.$message.info('cancle')
      },
      create () {
        debugger
        console.log('mdl', this.mdl)
        const antMenu2 = this.mdl
        this.mdl.id = ''
        const {
         MenuAdd
        } = this
        MenuAdd({
          antMenu2
        }).then(data => {
         debugger
         this.mdl = Object.assign({}, data.result)
         // this.$refs.modal.edit(this.mdl);
         console.log(data)
        });
      },
      update () {
        debugger
        console.log('mdl', this.mdl)
        const antMenu2 = this.mdl
        const {
         MenuAdd
        } = this
        MenuAdd({
          antMenu2
        }).then(data => {
         debugger
         this.mdl = Object.assign({}, data.result)
         // this.$refs.modal.edit(this.mdl);
         console.log(data)
        });
      },
      fetchs (params = {}) {
        if (!this.formEdit) {
          this.formStatus = 'update';
        }
        debugger
        const {
          TreeList
        } = this
        TreeList({
            params
        }).then(data => {
          debugger
          this.treeData = data.results;
        });
      }
  }
};
</script>

<style>
  .form a-input{
    border:1px solid red;
  }
  .ant-form-item{
    margin-bottom: 10px;
  }
</style>
